<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>微信营销页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            color: #fff;
            overflow-x: hidden;
            position: relative;
        }

        /* 粒子背景 */
        #particles-js {
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        /* 页面容器 */
        .container {
            width: 100%;
            min-height: 100vh;
            position: relative;
            overflow: hidden;
        }

        /* 页面部分 */
        .page {
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            position: relative;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.8s ease;
        }

        .page.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* 标题样式 */
        .title {
            font-size: 2.2rem;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            position: relative;
        }

        .title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: #fff;
            border-radius: 2px;
        }

        /* 副标题 */
        .subtitle {
            font-size: 1.2rem;
            margin-bottom: 30px;
            text-align: center;
            max-width: 80%;
            line-height: 1.6;
            opacity: 0.9;
        }

        /* 图片容器 */
        .image-container {
            width: 280px;
            height: 280px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            margin: 20px 0;
            position: relative;
            transition: transform 0.5s ease;
        }

        .image-container:hover {
            transform: scale(1.05);
        }

        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        /* 卡片翻转效果 */
        .flip-card {
            width: 300px;
            height: 180px;
            perspective: 1000px;
            margin: 25px 0;
        }

        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }

        .flip-card:hover .flip-card-inner {
            transform: rotateY(180deg);
        }

        .flip-card-front, .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 15px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .flip-card-front {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
        }

        .flip-card-back {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            transform: rotateY(180deg);
        }

        /* 按钮样式 */
        .btn {
            background: linear-gradient(45deg, #FF9A9E, #FAD0C4);
            color: #fff;
            border: none;
            padding: 14px 35px;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            margin-top: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .btn::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.5);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%);
            transform-origin: 50% 50%;
        }

        .btn:focus:not(:active)::after {
            animation: ripple 1s ease-out;
        }

        @keyframes ripple {
            0% {
                transform: scale(0, 0);
                opacity: 0.5;
            }
            100% {
                transform: scale(50, 50);
                opacity: 0;
            }
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }

        /* 进度指示器 */
        .progress {
            position: fixed;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 100;
        }

        .progress-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            margin: 15px 0;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .progress-dot.active {
            background: #fff;
            transform: scale(1.3);
        }

        /* 浮动动画 */
        .float {
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }

        /* 响应式调整 */
        @media (max-width: 480px) {
            .title {
                font-size: 1.8rem;
            }

            .subtitle {
                font-size: 1rem;
            }

            .image-container {
                width: 240px;
                height: 240px;
            }

            .flip-card {
                width: 260px;
                height: 160px;
            }
        }
    </style>
</head>
<body>
    <!-- 粒子背景 -->
    <div id="particles-js"></div>

    <!-- 页面容器 -->
    <div class="container">
        <!-- 页面1：主标题和介绍 -->
        <section class="page active" id="page1">
            <h1 class="title">品牌营销活动</h1>
            <p class="subtitle">这是一段关于您品牌或活动的简短介绍文字，吸引用户继续浏览</p>
            <div class="image-container float">
                <img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="品牌图片">
            </div>
            <button class="btn">立即参与</button>
        </section>

        <!-- 页面2：产品特点 -->
        <section class="page" id="page2">
            <h1 class="title">产品特点</h1>
            <p class="subtitle">突出展示您产品的核心优势和特点</p>

            <div class="flip-card">
                <div class="flip-card-inner">
                    <div class="flip-card-front">
                        <h3>特点一</h3>
                        <p>点击卡片查看详情</p>
                    </div>
                    <div class="flip-card-back">
                        <h3>创新设计</h3>
                        <p>详细描述产品特点一的详细信息</p>
                    </div>
                </div>
            </div>

            <div class="flip-card">
                <div class="flip-card-inner">
                    <div class="flip-card-front">
                        <h3>特点二</h3>
                        <p>点击卡片查看详情</p>
                    </div>
                    <div class="flip-card-back">
                        <h3>优质材料</h3>
                        <p>详细描述产品特点二的详细信息</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 页面3：用户评价 -->
        <section class="page" id="page3">
            <h1 class="title">用户评价</h1>
            <p class="subtitle">展示真实的用户反馈和评价</p>

            <div class="image-container">
                <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="用户头像">
            </div>

            <p class="subtitle">"这是一个用户评价示例，描述用户使用产品后的真实感受和体验。"</p>
            <p class="subtitle">- 张先生，产品用户</p>
        </section>

        <!-- 页面4：行动号召 -->
        <section class="page" id="page4">
            <h1 class="title">立即行动</h1>
            <p class="subtitle">不要错过这个绝佳机会，立即参与我们的活动</p>

            <div class="image-container float">
                <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="行动号召图片">
            </div>

            <button class="btn">立即参与</button>
        </section>
    </div>

    <!-- 进度指示器 -->
    <div class="progress">
        <div class="progress-dot active" data-page="0"></div>
        <div class="progress-dot" data-page="1"></div>
        <div class="progress-dot" data-page="2"></div>
        <div class="progress-dot" data-page="3"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script>
        // 初始化粒子背景
        particlesJS("particles-js", {
            particles: {
                number: { value: 60, density: { enable: true, value_area: 800 } },
                color: { value: "#ffffff" },
                shape: { type: "circle" },
                opacity: { value: 0.5, random: true },
                size: { value: 3, random: true },
                line_linked: {
                    enable: true,
                    distance: 150,
                    color: "#ffffff",
                    opacity: 0.4,
                    width: 1
                },
                move: {
                    enable: true,
                    speed: 2,
                    direction: "none",
                    random: true,
                    straight: false,
                    out_mode: "out",
                    bounce: false
                }
            },
            interactivity: {
                detect_on: "canvas",
                events: {
                    onhover: { enable: true, mode: "repulse" },
                    onclick: { enable: true, mode: "push" },
                    resize: true
                }
            },
            retina_detect: true
        });

        // 全屏滚动功能
        const pages = document.querySelectorAll('.page');
        const dots = document.querySelectorAll('.progress-dot');
        let currentPage = 0;
        let isScrolling = false;

        // 初始化页面显示
        function showPage(index) {
            pages.forEach(page => page.classList.remove('active'));
            dots.forEach(dot => dot.classList.remove('active'));

            pages[index].classList.add('active');
            dots[index].classList.add('active');
            currentPage = index;
        }

        // 滚动事件处理
        function handleScroll(event) {
            if (isScrolling) return;

            isScrolling = true;

            if (event.deltaY > 0 && currentPage < pages.length - 1) {
                showPage(currentPage + 1);
            } else if (event.deltaY < 0 && currentPage > 0) {
                showPage(currentPage - 1);
            }

            setTimeout(() => {
                isScrolling = false;
            }, 800);
        }

        // 点击进度点跳转
        dots.forEach(dot => {
            dot.addEventListener('click', () => {
                const pageIndex = parseInt(dot.getAttribute('data-page'));
                showPage(pageIndex);
            });
        });

        // 触摸滑动支持
        let startY = 0;

        document.addEventListener('touchstart', e => {
            startY = e.touches[0].clientY;
        });

        document.addEventListener('touchend', e => {
            const endY = e.changedTouches[0].clientY;
            const diff = startY - endY;

            if (Math.abs(diff) > 50) {
                if (diff > 0 && currentPage < pages.length - 1) {
                    showPage(currentPage + 1);
                } else if (diff < 0 && currentPage > 0) {
                    showPage(currentPage - 1);
                }
            }
        });

        // 鼠标滚轮事件
        document.addEventListener('wheel', handleScroll);

        // 按钮点击效果
        document.querySelectorAll('.btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // 添加点击波纹效果
                this.classList.add('clicked');
                setTimeout(() => {
                    this.classList.remove('clicked');
                }, 600);

                // 这里可以添加实际的点击逻辑
                alert('感谢您的参与！');
            });
        });

        // 初始化显示第一页
        showPage(0);
    </script>
</body>
</html>